.phone {
    background-color: gainsboro;
    .top {
        width: 100vw;
        height: 6vh;
        background-color: white;
        border-bottom: 1px solid gainsboro;
        h3 {
            margin: 10px;
            width: 30vw;

        }
    }
    .list {
        display: flex;
        width: 100vw;
        height: 7vh;
        line-height: 7vh;
        justify-content: space-around;
        background-color: white;
        .pps{
            flex: 1;
            text-align: center;
        }
        .ppsactive {
            text-align: center;
            flex: 1;
            border-bottom: rgb(24, 143, 255) solid 1px;
            color: rgb(24, 143, 255);
        }
    }

    .bottom1 {
        border-top: 1px solid gainsboro;
        padding-top: 3vw;
        .bottom {
            padding-top: 2vw;
            background-color: white;
        }

        .bottom_main {
            width: 100vw;
            .top {
                width: 90vw;
                box-sizing: border-box;
                margin: 10px auto;
                align-items: center;
                display: flex;

                img {
                    width: 10vw;
                    height: 10vw;
                    border-radius: 50%;
                }

                span {
                    margin: 0 7px;
                }

                .span1 {
                    color: gray;
                }

                .span2 {
                    padding: 2px 4px;
                    background-color: rgb(203, 203, 204);
                }

                .span3 {
                    color: red;
                }
            }

            .bom {
                width: 90%;
                margin: 7px auto;
                padding-bottom: 2vh;
                border-bottom: 1px solid rgb(192, 192, 192);

                span {
                    color: gray;
                }

            }

            .bomms {
                width: 90%;
                margin: 7px auto;
                padding-bottom: 2vh;

                p {
                    text-align: right;
                    color: gray;
                }

            }

            .actived {
                height: 5vh;
                line-height: 5vh;
                width: 90%;
                margin: 10px auto;
                display: flex;
                padding: 5px 0;
                justify-content: space-between;
                border-top: 1px solid gainsboro;

                p {
                    color: gray;
                }

                button {

                    color: white;
                    padding: 1vh 7vw;
                    border-radius: 25px;
                    outline: none;
                    border: transparent;
                    background-color: rgb(35, 138, 235);

                }
            }
        }
    }
}